<template>
  <el-container class="bill-container">
    <!-- 基础信息部分 -->
    <div class="section-header">
      <div class="line"></div>
      <span class="title">基础信息</span>
    </div>

    <el-form :model="formData" label-width="100px" class="form-content" disabled>
      <el-row :gutter="24">
        <el-col :span="8">
          <el-form-item label="订单编号">
            <el-input v-model="formData.orderId"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="客户名称">
            <el-input v-model="formData.customerName"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="客户编码">
            <el-input v-model="formData.customerCode"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="24">
        <el-col :span="8">
          <el-form-item label="发货人">
            <el-input v-model="formData.shipper"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="收货人">
            <el-input v-model="formData.consignee"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="24">
        <el-col :span="8">
          <el-form-item label="始发地">
            <el-input v-model="formData.origin"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="目的地">
            <el-input v-model="formData.destination"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="合同">
            <el-input v-model="formData.contract"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col :span="8">
          <el-form-item label="运输类型">
            <el-input v-model="formData.transportationType"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="货物类型">
            <el-input v-model="formData.goodsType"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="24">
        <el-col :span="8">
          <el-form-item label="订单来源">
            <el-input v-model="formData.orderSource"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="下单时间">
            <el-input v-model="formData.orderTime"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <!-- 货物信息 -->
      <div class="title-bar goods-title">
        <div class="blue-line"></div>
        <span class="title">货物信息</span>
      </div>

      <div class="goods-content">
        <el-table :data="goodsList" border style="width: 100%; margin-top: 16px">
          <el-table-column prop="id" label="序号" width="80"></el-table-column>
          <el-table-column prop="goodsName" label="货物名称"></el-table-column>
          <el-table-column prop="quantity" label="数量"></el-table-column>
          <el-table-column prop="unit" label="单位" width="100"></el-table-column>
          <el-table-column prop="volume" label="体积(m³)"></el-table-column>
          <el-table-column prop="weight" label="重量(kg)"></el-table-column>
        </el-table>

        <el-row style="margin-top: 16px">
          <el-col :span="24">
            <el-descriptions :column="3" border>
              <el-descriptions-item label="总数量">
                {{ totalQuantity }}
              </el-descriptions-item>
              <el-descriptions-item label="总体积">
                {{ totalVolume }}m³
              </el-descriptions-item>
              <el-descriptions-item label="总重量">
                {{ totalWeight }}kg
              </el-descriptions-item>
            </el-descriptions>
          </el-col>
        </el-row>
      </div>


      <!-- 需求车辆 -->
      <div class="title-bar vehicle-title">
        <div class="blue-line"></div>
        <span class="title">需求车辆</span>
      </div>

      <el-row :gutter="24">
        <el-col :span="8">
          <el-form-item label="车型">
            <el-input v-model="formData.vehicleType"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="车长">
            <el-input v-model="formData.vehicleLength"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="用车数量">
            <el-input v-model="formData.vehicleQuantity"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <!-- 费用信息 -->
      <div class="title-bar">
        <div class="blue-line"></div>
        <span class="title">费用信息</span>
      </div>

      <el-row :gutter="24">
        <el-col :span="8">
          <el-form-item label="计费方式">
            <el-input v-model="formData.chargingMethod"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="运输费">
            <el-input v-model="formData.transportationFee"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="保险费">
            <el-input v-model="formData.insuranceFee"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="24">
        <el-col :span="8">
          <el-form-item label="包装费">
            <el-input v-model="formData.packagingFee"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="装卸费">
            <el-input v-model="formData.loadingUnloadingFee"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="中转费">
            <el-input v-model="formData.transferFee"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="24">
        <el-col :span="8">
          <el-form-item label="燃油费">
            <el-input v-model="formData.fuelFee"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="服务费">
            <el-input v-model="formData.serviceFee"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="其他费用">
            <el-input v-model="formData.otherFees"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="24">
        <el-col :span="8">
          <el-form-item label="费用合计">
            <el-input v-model="totalFee" class="total-fee"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <!-- 付款方式 -->
      <div class="title-bar">
        <div class="blue-line"></div>
        <span class="title">付款方式</span>
      </div>

      <el-row :gutter="24">
        <el-col :span="8">
          <el-form-item label="现付">
            <el-input v-model="formData.cashPayment"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="预付">
            <el-input v-model="formData.prepayment"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="到付">
            <el-input v-model="formData.cashOnDelivery"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="24">
        <el-col :span="8">
          <el-form-item label="周期付">
            <el-input v-model="formData.periodicPayment"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="24">
        <el-col :span="8">
          <el-form-item label="付费合计">
            <el-input v-model="totalPayment" class="total-fee"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <!-- 订单备注 -->
      <div class="title-bar">
        <div class="blue-line"></div>
        <span class="title">订单备注</span>
      </div>

      <el-row>
        <el-col :span="24">
          <el-form-item label="备注">
            <el-input
                type="textarea"
                v-model="formData.remarks"
                :rows="4"
                disabled
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </el-container>
</template>

<script>
import axios from 'axios';

export default {
  name: 'BillDetail',
  data() {
    return {
      formData: {
        orderId: '',
        customerName: '',
        shipper: '',
        consignee: '',
        customerCode: '',
        origin: '',
        destination: '',
        contract: '',
        transportationType: '',
        goodsType: '',
        orderSource: '',
        orderTime: '',
        chargingMethod: '',
        transportationFee: '',
        insuranceFee: '',
        packagingFee: '',
        loadingUnloadingFee: '',
        transferFee: '',
        fuelFee: '',
        serviceFee: '',
        otherFees: '',
        cashPayment: '',
        prepayment: '',
        cashOnDelivery: '',
        periodicPayment: '',
        remarks: '',
        vehicleType: '',
        vehicleLength: '',
        vehicleQuantity: ''
      },
      goodsList: [],
      totalQuantity: 0,
      totalVolume: 0,
      totalWeight: 0,
      totalFee: 0,
      totalPayment: 0
    };
  },
  computed: {
    // 计算货物总数量
    totalQuantityComputed() {
      return this.goodsList.reduce((sum, item) => sum + (Number(item.quantity) || 0), 0);
    },
    // 计算货物总体积
    totalVolumeComputed() {
      return this.goodsList.reduce((sum, item) => sum + (Number(item.volume) || 0), 0);
    },
    // 计算货物总重量
    totalWeightComputed() {
      return this.goodsList.reduce((sum, item) => sum + (Number(item.weight) || 0), 0);
    },
    // 计算费用合计
    totalFeeComputed() {
      const fees = [
        this.formData.transportationFee,
        this.formData.insuranceFee,
        this.formData.packagingFee,
        this.formData.loadingUnloadingFee,
        this.formData.transferFee,
        this.formData.fuelFee,
        this.formData.serviceFee,
        this.formData.otherFees
      ];
      return fees.reduce((sum, fee) => sum + (Number(fee) || 0), 0);
    },
    // 计算付费合计
    totalPaymentComputed() {
      const payments = [
        this.formData.cashPayment,
        this.formData.prepayment,
        this.formData.cashOnDelivery,
        this.formData.periodicPayment
      ];
      return payments.reduce((sum, payment) => sum + (Number(payment) || 0), 0);
    }
  },
  methods: {
    // 从后端获取订单详情数据
    getOrderDetail() {
      const orderId = this.$route.params.id; // 假设订单ID从路由参数获取
      axios.get(`http://localhost:10086/orders/order/getOrdersDetail/${orderId}`)
          .then(response => {
            const order = response.data.data;
            this.formData = order;
            // 获取货物信息
            axios.get(`http://localhost:10086/orders/goods-info/getGoodsInfoByOrderId/${orderId}`)
                .then(goodsResponse => {
                  this.goodsList = goodsResponse.data.data;
                  // 更新计算属性
                  this.totalQuantity = this.totalQuantityComputed;
                  this.totalVolume = this.totalVolumeComputed;
                  this.totalWeight = this.totalWeightComputed;
                })
                .catch(error => {
                  console.error('获取货物信息出错', error);
                });
            // 获取车辆信息
            axios.get(`http://localhost:10086/orders/vehicle/getVehicleByOrderId/${orderId}`)
                .then(vehicleResponse => {
                  const vehicleInfo = vehicleResponse.data.data;
                  this.formData.vehicleType = vehicleInfo.vehicleType;
                  this.formData.vehicleLength = vehicleInfo.vehicleLength;
                  this.formData.vehicleQuantity = vehicleInfo.vehicleQuantity;
                })
                .catch(error => {
                  console.error('获取车辆信息出错', error);
                });
            // 获取费用信息
            axios.get(`http://localhost:10086/orders/fee/getFeeInfoByOrderId/${orderId}`)
                .then(feeResponse => {
                  const feeInfo = feeResponse.data.data;
                  this.formData.chargingMethod = feeInfo.chargingMethod;
                  this.formData.transportationFee = feeInfo.transportationFee;
                  this.formData.insuranceFee = feeInfo.insuranceFee;
                  this.formData.packagingFee = feeInfo.packagingFee;
                  this.formData.loadingUnloadingFee = feeInfo.loadingUnloadingFee;
                  this.formData.transferFee = feeInfo.transferFee;
                  this.formData.fuelFee = feeInfo.fuelFee;
                  this.formData.serviceFee = feeInfo.serviceFee;
                  this.formData.otherFees = feeInfo.otherFees;
                  this.totalFee = this.totalFeeComputed;
                })
                .catch(error => {
                  console.error('获取费用信息出错', error);
                });
            // 获取付款方式信息
            axios.get(`http://localhost:10086/orders/payment/getPaymentMethodInfoByOrderId/${orderId}`)
                .then(paymentResponse => {
                  const paymentInfo = paymentResponse.data.data;
                  this.formData.cashPayment = paymentInfo.cashPayment;
                  this.formData.prepayment = paymentInfo.prepayment;
                  this.formData.cashOnDelivery = paymentInfo.cashOnDelivery;
                  this.formData.periodicPayment = paymentInfo.periodicPayment;
                  this.totalPayment = this.totalPaymentComputed;
                })
                .catch(error => {
                  console.error('获取付款方式信息出错', error);
                });
          })
          .catch(error => {
            console.error('获取订单详情出错', error);
          });
    }
  },
  created() {
    this.getOrderDetail();
  }
};
</script>

<style scoped>
.bill-container {
  padding: 24px;
  background: #fff;
  min-width: 1200px;
}

.title-bar {
  display: flex;
  align-items: center;
  margin-bottom: 24px;
  border-bottom: 1px solid #EBEEF5;
  padding-bottom: 16px;
}

.blue-line {
  width: 4px;
  height: 16px;
  background: #0052FF;
  margin-right: 8px;
  border-radius: 2px;
}

.title {
  font-size: 16px;
  font-weight: 500;
  color: #333;
}

.goods-title {
  margin-top: 32px;
}

.vehicle-title {
  margin-top: 48px;
}

.delete-btn {
  color: #F56C6C;
}

.total-fee {
  color: #F56C6C;
  font-weight: 500;
}

.form-footer {
  text-align: center;
  margin-top: 40px;
}
</style>
